<script lang="ts" setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useDialogSelectCurrency } from '~/dialogs/useDialogSelectCurrency'

const { logoAndIcoAndLoading } = storeToRefs(useAppStore())
const { isLogin, currentGlobalCurrency, currentGlobalCurrencyBalance, userInfo } =
  storeToRefs(useAppStore())
const { openDialogSelectCurrency } = useDialogSelectCurrency()
const { notificationsCount } = useNotificationState()

const { y: scrollY } = useScroll(window, { throttle: 16 }) // 16ms 节流
const colorRgb = '50, 55, 56' // #323738 的 RGB 值

const maxOpacityScroll = 100

const opacity = computed(() => Math.min(scrollY.value / maxOpacityScroll, 1))


// 需要隐藏头部的路由白名单
const noHeaderRoutes = ['/login/signin', '/login/regist', '/login/reset']
const route = useRoute()
const getPurePath = (path: string) => path.replace(/^\/[a-z]{2,3}(-[A-Z]{2,3})?\//, '/')
const hideHeader = computed(() =>
  noHeaderRoutes.some(path => getPurePath(route.path).startsWith(path))
)
const countTotal = computed(() => {
  return Number(notificationsCount.value?.notification_count || 0) + Number(notificationsCount.value?.station_count || 0) + Number(notificationsCount.value?.notice_count || 0) + Number(notificationsCount.value?.reward_count || 0)
})

function goSignin() {
  i18nNavigateTo('/login/signin')
}
function goRegist() {
  i18nNavigateTo('/login/regist')
}
</script>
<template>
  <div v-show="!hideHeader" class="page-header  left-0 top-0 w-full fixed z-[99]" :class="{
    'opacity1': !isLogin
  }" :style="`background-color: rgba(${colorRgb}, ${opacity})`">
    <div v-if="isLogin" class="flex size-full items-center justify-between  px-4">
      <BaseImage class="h-[1.75rem] w-[1.375rem]" :url="application.getImgUrl(logoAndIcoAndLoading.first_letter)" />
      <div class="flex items-center">
        <div
          class="flex h-10 rounded-xl relative w-[11.25rem] border-1 p-0.5 sm:w-[16.5rem] border-[#3A4142] bg-black-1 dark:border-white_alpha5 dark:bg-white_alpha10">
          <div @click="openDialogSelectCurrency()"
            class="mr-1 flex cursor-pointer select-none items-center ml-1.5 flex-auto justify-between">
            <AppAmount :reverse="true" class="" :amount="currentGlobalCurrencyBalance || 0"
              :currency-type="currentGlobalCurrency" />
            <BaseIcon class="arrow" :class="{ 'arrow-up': false }" name="uni-arrow-down" />
          </div>


          <BaseButton @click="i18nNavigateTo('/deposit')" class="button button-brand ml-auto h-8 flex-none rounded-lg">
            <BaseIcon name="deposit"></BaseIcon>
          </BaseButton>
        </div>
        <div class="relative ml-2 rounded bg-[var(--color-white-50)] text-secondary center">
          <BaseButton @click="i18nNavigateTo('/notification')" type="none"
            class="button w-[2.1875rem] h-[2.125rem] center p-0 text-[1.3125rem] relative">
            <div v-if="countTotal > 0" class="absolute left-[.9375rem] top-[.125rem] z-[1]">
              <BaseBadge :count="countTotal" mode="active" :max="99" />
            </div>
            <BaseIcon name="message"></BaseIcon>
          </BaseButton>
          <div class="absolute-center h-5  w-[1px] bg-[var(--color-white-100)]"></div>
          <BaseButton @click="i18nNavigateTo('/promotions/promotion')" type="none"
            class="button  w-[2.1875rem] h-[2.125rem] center p-0 text-[1.3125rem]">
            <BaseIcon name="gift"></BaseIcon>
          </BaseButton>
        </div>

        <div class="ml-2 p-[.0625rem]">
          <BaseButton @click="i18nNavigateTo('/personal')" type="none"
            class=" button rounded-full center p-0 h-[2.375rem] w-[2.375rem] bg-black_alpha5">
            <BaseImage class="block w-[2.125rem] h-[2.125rem] user-icon" url="/images/webp/home/avator1.webp" />
          </BaseButton>
        </div>
      </div>
    </div>
    <div v-else class="flex size-full items-center overflow-hidden  px-4">
      <BaseImage class="h-[1.75rem] w-[1.375rem]" :url="application.getImgUrl(logoAndIcoAndLoading.first_letter)" />
      <BaseButton type="none" class="ml-auto h-[2.125rem] rounded-lg px-[.8125rem] text-base font-extrabold btn-1"
        @click="goSignin">{{ $t('login') }}</BaseButton>
      <BaseButton type="primary"
        class="ml-[.3125rem] font-extrabold h-[2.125rem] rounded-lg px-4 text-base min-w-[5.125rem]" @click="goRegist">
        {{ $t('regist') }}</BaseButton>
    </div>
  </div>
</template>
<style scoped lang="scss">
.user-icon {
  --tg-base-img-style-radius: 100rem;
}

.arrow {
  font-size: 1rem;
}

.btn-1 {
  border: 0.125rem solid var(--color-bg-black-5);
}

.button-brand {
  --tg-base-icon-color: var(--color-bg-black-3);
}

.page-header {
  box-sizing: content-box;
  border-top: var(--safe-top) solid transparent;
  height: var(--header);

  &.opacity1 {
    background-color: var(--color-bg-black-4) !important;
  }
}
</style>

<!-- 如需编程式跳转请优先使用 composables/useI18nRouter.ts 的 i18nNavigateTo -->
